<template>
  <div class="Invitation_code_inp">
    <c-title :hide="false" text="输入邀请码"></c-title>
    <div class="generateBox">
      <div class="generateNum">邀请码</div>
      <div class="generateNum_inp">
        <input v-model="inpval" placeholder="请输入邀请码" />
      </div>
      <div class="generateTips_check" v-if="shop_agreement_text">
        <van-checkbox v-model="checked_agreement" icon-size="16px"></van-checkbox>
        <span @click="toAg">《{{ shop_agreement_title }}》</span>
      </div>
    </div>

    <div class="generateBtn">
      <div class="btn" @click="closeTap">取消</div>
      <div class="btn" @click="becomeStoreTap">确认</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked_agreement: false,
      inpval: "",
      lng: "",
      lat: "",
      shop_agreement_title: "邀请码协议",
      shop_agreement_text: ""
    };
  },
  activated() {
    this.fun
      .getLocation()
      .then(res => {
        this.lat = res.point.lat;
        this.lng = res.point.lng;
      })
      .catch(err => {
        console.log(err);
      });
    this.getData();
    if (this.$route.query.code) {
      this.inpval = this.$route.query.code;
    }
  },
  methods: {
    toAg() {
      this.$router.push(this.fun.getUrl("cloud_shop_agreement", {}));
    },
    async getData() {
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.code.agreement", {}, "");
      if (result) {
        console.log(data);
        this.shop_agreement_text = data.shop_agreement_text;
        this.shop_agreement_title = data.shop_agreement_title;
      } else {
        this.$toast(msg);
      }
    },
    async becomeStoreTap() {
      if (!this.checked_agreement && this.shop_agreement_text) {
        this.$toast("请先阅读并同意协议");
        return;
      }
      let json = { code: this.inpval, longitude: this.lng, latitude: this.lat };
      let { msg, result } = await $http.post("plugin.cloud-shop.frontend.code.becomeStore", json, "");
      if (result) {
        this.$toast("绑定成功");
        this.$router.push(this.fun.getUrl("home", {}));
        this.initPopupClose();
      } else {
        this.$toast(msg);
      }
    },
    closeTap() {
      this.checked_agreement = false;
      this.$router.push(this.fun.getUrl("home", {}));
    },
    initPopupClose() {
      this.checked_agreement = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.Invitation_code_inp {
  min-height: 100vh;
  background: #ffffff;
}
.generateBtn {
  margin-top: 1rem;
  border: 1px solid #ececec;
  display: flex;
  background: #ffffff;
  .btn {
    height: 2.78rem;
    flex: 1;
    text-align: center;
    line-height: 2.78rem;
    font-size: 0.94rem;
    color: #f15353;
  }
  .btn:first-child {
    border-right: 1px solid #ececec;
    font-size: 0.94rem;
    color: #7e7e7e;
  }
}
.icon-adsystem_icon_cancle {
  font-size: 2rem;
  color: #ffffff;
}
.generateBox {
  background: #ffffff;
  padding: 0 0.84rem;
  padding-top: 1.03rem;
  display: flex;
  flex-direction: column;
  .code {
    width: 7.5rem;
    height: 7.5rem;
    background: red;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    margin-top: 1.63rem;
    margin-bottom: 1.53rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .txt {
    font-weight: bold;
    font-size: 1rem;
    color: #00001c;
  }
  .generateTips_check {
    display: flex;
    color: #f15353;
  }
  .tips_txt {
    text-align: center;
    font-size: 0.81rem;
    color: #00001c;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .generateTips {
    font-size: 0.81rem;
    color: #808080;
    text-align: left;
    margin-bottom: 1.63rem;
    margin-top: 0.5rem;
  }
  .generateNum {
    font-weight: 500;
    font-size: 0.88rem;
    color: #00001c;
    margin-bottom: 0.5rem;
    text-align: left;
    margin-top: 1.28rem;
  }
  .generateNum_inp {
    border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
    border: 0.03rem solid #d6d6dc;
    height: 2.25rem;
    margin-bottom: 1rem;
    input {
      border: none;
      height: 100%;
      width: 100%;
      padding: 0 0.5rem;
    }
  }
}
</style>
